<template>
  <div
    class="msSectioner"
    :class="{ msSectioner__disabled: disabled }"
    :style="{ marginTop: marginTop + 'px', marginBottom: marginBottom + 'px' }"
  >
    <div
      class="msSectioner__item"
      v-for="(item, index) in vals"
      :key="index"
      :style="{
        borderTopLeftRadius: index === 0 ? radius + 'px' : '0',
        borderBottomLeftRadius: index === 0 ? radius + 'px' : '0',
        borderTopRightRadius: index === values.length - 1 ? radius + 'px' : '0',
        borderBottomRightRadius: index === values.length - 1 ? radius + 'px' : '0',
        borderColor: type === 'button' ? getColor : 'transparent',
        background: currentIndex === index && type === 'button' ? getColor : 'transparent',
        height: height + 'px'
      }"
      :class="{
        'fui-segmented__first': index === 0 && type === 'button',
        'fui-seg__item-bg': currentIndex === index && !color && type === 'button',
        'fui-seg__item-border': !color && type === 'button',
        'msSectioner__item-border': type === 'button'
      }"
      @click="handleClick(index)"
    >
      <span
        :style="{
          fontSize: size + 'px',
          color: currentIndex === index ? activeColor : getColor,
          fontWeight: bold && currentIndex === index ? 600 : 400
        }"
        :class="{ msSectioner__disabled: item.disabled, 'fui-seg__text-color': !color && currentIndex !== index }"
        >{{ item.name }}</span
      >
      <div
        class="msSectioner__item-line"
        v-if="currentIndex === index && type === 'text'"
        :style="{ background: activeColor }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MsSectioner',
  emits: ['click'],
  props: {
    values: {
      type: Array,
      default() {
        return []
      }
    },
    current: {
      type: Number,
      default: 0
    },
    //button、text
    type: {
      type: String,
      default: 'button'
    },
    color: {
      type: String,
      default: ''
    },
    activeColor: {
      type: String,
      default: '#fff'
    },
    bold: {
      type: Boolean,
      default: false
    },
    height: {
      type: [Number, String],
      default: 40
    },
    size: {
      type: [Number, String],
      default: 14
    },
    radius: {
      type: [Number, String],
      default: 4
    },
    disabled: {
      type: Boolean,
      default: false
    },
    marginTop: {
      type: [Number, String],
      default: 0
    },
    marginBottom: {
      type: [Number, String],
      default: 0
    },
    control: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    getColor() {
      return this.color
    }
  },
  data() {
    return {
      currentIndex: 0,
      vals: []
    }
  },
  watch: {
    current(val) {
      if (val !== this.currentIndex) {
        this.currentIndex = val
      }
    },
    values(vals) {
      this.initData(vals)
    }
  },
  created() {
    this.currentIndex = this.current
    this.initData(this.values)
  },
  methods: {
    initData(vals) {
      if (vals && vals.length > 0) {
        if (typeof vals[0] === 'object') {
          this.vals = vals
        } else {
          //字符串
          this.vals = vals.map((item) => {
            return {
              name: item
            }
          })
        }
      }
    },
    handleClick(index) {
      let vals = this.vals[index]
      if (this.currentIndex !== index && !this.disabled && !vals.disabled) {
        if (this.control) {
          this.currentIndex = index
        }
        this.$emit('click', {
          index: index,
          ...vals
        })
      }
    },
    standby(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style scoped>
.msSectioner {
  width: fit-content;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  overflow: hidden;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}

.msSectioner__item {
  /* #ifndef APP-NVUE */
  display: inline-flex;
  box-sizing: border-box;
  transition: all 0.1s linear;
  /* #endif */
  flex: 1;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-top-width: 0;
  border-bottom-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  position: relative;
  white-space: nowrap;
  padding: 0 16px;
}

.msSectioner__item-border {
  /* #ifdef APP-NVUE */
  border-top-width: 0.5px;
  border-bottom-width: 0.5px;
  border-right-width: 0.5px;
  /* #endif */

  /* #ifndef APP-NVUE */
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
  /* #endif */
}

.msSectioner__item-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
}

.msSectioner__disabled {
  opacity: 0.5;
  /* #ifdef H5 */
  cursor: not-allowed !important;
  /* #endif */
}

.fui-segmented__first {
  border-left-style: solid;
  /* #ifndef APP-NVUE */
  border-left-width: 1px;
  /* #endif */

  /* #ifdef APP-NVUE */
  border-left-width: 0.5px;
  /* #endif */
}

/* #ifndef APP-NVUE */
.fui-seg__item-bg {
  background: rgb(var(--primary-6)) !important;
}

.fui-seg__item-border {
  border-color: rgb(var(--primary-6)) !important;
}

.fui-seg__text-color {
  color: rgb(var(--primary-6)) !important;
}

/* #endif */
</style>
